import React, { FC, useMemo, useContext } from "react";
import type { AutoModelDataType } from "./index";
import { ChatLoadText, ChatLoadTitle, ChatLoadTable } from '../ChatLoadDom'
import useSequentialLoader, { LoaderContext } from '@/utils/hooks/useSequentialLoader'

interface IProps {
  data: AutoModelDataType['analysisIndexResult'];
  originData: AutoModelDataType;
  onLoad?: () => void;
  onRender?: (isForce: boolean) => void;
}

const Step2: FC<IProps> = ({
  data,
  originData,
  onLoad,
  onRender
}) => {
  const { effectData } = useContext(LoaderContext)
  const info = useMemo(() => {
    const data = effectData.analysisIndexResult
    const expectStr = effectData.targetIndexResult && effectData.targetIndexResult.targetIndexList ? effectData.targetIndexResult.targetIndexList.filter((item: any) => !!item.expectValue).map((item: any) => item.desc).join('、') : ''
    const naemStr = data.analysisIndexList ? data.analysisIndexList.map((item: any) => item.indexName).join('、') : ''
    return {
      ...data,
      startStr: `首先，我将通过历史数据进行关联分析,获得影响${expectStr}的主要影响因素。`,
      endStr: `经过分析，影响${expectStr}的因素从强到弱排序如下: ${naemStr}`
    }
  }, [effectData])
  const columns = [
    {
      title: "序号",
      key: "index",
      render: (record: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "指标",
      dataIndex: "indexName",
      key: "indexName",
      render: (record: any) => {
        return record?.indexName ?? "--";
      },
    },
    {
      title: "仪表位号",
      dataIndex: "tagName",
      key: "tagName",
      render: (record: any) => {
        return record?.tagName ?? "--";
      },
    },
    {
      title: "单位",
      dataIndex: "tagUnit",
      key: "tagUnit",
      render: (record: any) => {
        return record?.tagUnit ?? "--";
      },
    },
    {
      title: "正常操作范围",
      dataIndex: "normalOperationRange",
      key: "normalOperationRange",
      render: (record: any) => {
        return record?.normalOperationRange ?? "--";
      },
    },
    {
      title: "设计指标",
      dataIndex: "designIndex",
      key: "designIndex",
      render: (record: any) => {
        return record?.designIndex ?? "--";
      },
    },
    // {
    //   title: "指标上限",
    //   dataIndex: "upperIndex",
    //   key: "upperIndex",
    //   render: (text: any) => {
    //     return text ? text : "--";
    //   },
    // },
    // {
    //   title: "指标下限",
    //   dataIndex: "lowIndex",
    //   key: "lowIndex",
    //   render: (text: any) => {
    //     return text ? text : "--";
    //   },
    // },
    // {
    //   title: "指标类型",
    //   dataIndex: "bottleneckType",
    //   key: "bottleneckType",
    //   render: (text: any) => {
    //     return text ? text : "--";
    //   },
    // },
  ];
  const loadedComponents = useSequentialLoader([
    {
      component: ChatLoadTitle,
      effectKey: 'startStr'
    },
    {
      component: ChatLoadTable,
      effectKey: 'analysisIndexList',
      componentProps: {
        columns: columns,
      }
    },
    {
      component: ChatLoadText,
      effectKey: 'endStr'
    },
  ], info, {
    onLoad: () => {
      onRender && onRender(true)
    },
    onEnd: () => {
      onLoad && onLoad()
    }
  }, {
    loading: !!onLoad
  })
  return (
    <>
      {loadedComponents}
    </>
  );
};

export default Step2;
